<template>
  <div class="exam-payment-detail">
    <div class="header">
      <h1>监考通知确认情况表 / 详细确认名单</h1>
      <div class="back-btn" @click="goBack">返回</div>
    </div>

    <div class="search-bar">
      <input
          v-model="searchKeyword"
          type="text"
          placeholder="请输入监考人姓名/工号关键词查询"
          class="search-input"
      >
      <button class="search-btn" @click="search">查询</button>
      <button class="reset-btn" @click="resetSearch">重置</button>
    </div>

    <div class="table-container">
      <table class="detail-table">
        <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>工号</th>
          <th>所在单位</th>
          <th>身份证号</th>
          <th>移动电话</th>
          <th>监考时间</th>
          <th>监考场次（200元/场）</th>
          <th>总金额</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(person, index) in filteredPersons" :key="person.id">
          <td>{{ index + 1 }}</td>
          <td>{{ person.name }}</td>
          <td>{{ person.gender }}</td>
          <td>{{ person.employeeId }}</td>
          <td>{{ person.department }}</td>
          <td>{{ person.idNumber }}</td>
          <td>{{ person.phone }}</td>
          <td>{{ person.examTime }}</td>
          <td>{{ person.sessions }}</td>
          <td class="amount">{{ person.totalAmount }}元</td>
        </tr>
        </tbody>
      </table>
    </div>

    <div class="summary">
      <div class="summary-item">
        <span>总人数：</span>
        <strong>{{ totalPersons }}人</strong>
      </div>
      <div class="summary-item">
        <span>总场次：</span>
        <strong>{{ totalSessions }}场</strong>
      </div>
      <div class="summary-item">
        <span>总金额：</span>
        <strong class="total-amount">{{ totalAmount }}元</strong>
      </div>
    </div>

    <div class="actions">
      <button class="export-btn" @click="exportData">数据导出</button>
      <button class="print-btn" @click="printData">打印报表</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

// 获取批次ID
const batchId = ref(Number(route.params.id));
const searchKeyword = ref('');

// 模拟监考人员费用数据
const examPersons = ref([
  {
    id: 1,
    name: 'QIANJIAXIN1',
    gender: '男',
    employeeId: '10001',
    department: '计算机智能学院',
    idNumber: '420116198912245635',
    phone: '12345678910',
    examTime: '12月25日全天，12月26日全天',
    sessions: 4,
    totalAmount: 800
  },
  {
    id: 2,
    name: 'QIANJIAXIN2',
    gender: '男',
    employeeId: '10002',
    department: '计算机智能学院',
    idNumber: '420116198912245635',
    phone: '12345678910',
    examTime: '12月25日上午，12月26日下午',
    sessions: 2,
    totalAmount: 400
  },
  {
    id: 3,
    name: 'QIANJIAXIN3',
    gender: '男',
    employeeId: '10003',
    department: '计算机智能学院',
    idNumber: '420116198912245635',
    phone: '12345678910',
    examTime: '12月25日下午，12月26日上午',
    sessions: 2,
    totalAmount: 400
  },
  {
    id: 4,
    name: 'QIANJIAXIN4',
    gender: '女',
    employeeId: '10004',
    department: '电子信息学院',
    idNumber: '420116199001015678',
    phone: '13800138000',
    examTime: '12月25日全天',
    sessions: 1,
    totalAmount: 200
  },
  {
    id: 5,
    name: 'QIANJIAXIN5',
    gender: '男',
    employeeId: '10005',
    department: '机械工程学院',
    idNumber: '420116198511112222',
    phone: '13900139000',
    examTime: '12月26日全天',
    sessions: 1,
    totalAmount: 200
  }
]);

// 过滤人员数据
const filteredPersons = computed(() => {
  if (!searchKeyword.value) return examPersons.value;
  const keyword = searchKeyword.value.toLowerCase();
  return examPersons.value.filter(person =>
      person.name.toLowerCase().includes(keyword) ||
      person.employeeId.toLowerCase().includes(keyword)
  );
});

// 汇总数据
const totalPersons = computed(() => filteredPersons.value.length);
const totalSessions = computed(() => filteredPersons.value.reduce((sum, person) => sum + person.sessions, 0));
const totalAmount = computed(() => filteredPersons.value.reduce((sum, person) => sum + person.totalAmount, 0));

// 搜索
const search = () => {
  console.log('搜索关键词:', searchKeyword.value);
};

// 重置搜索
const resetSearch = () => {
  searchKeyword.value = '';
};

// 导出数据
const exportData = () => {
  console.log('导出数据');
  alert('开始导出监考费用数据');
};

// 打印报表
const printData = () => {
  console.log('打印报表');
  window.print();
};

// 返回上一页
const goBack = () => {
  router.go(-1);
};

onMounted(() => {
  console.log('加载批次ID:', batchId.value);
});
</script>

<style scoped>
.exam-payment-detail {
  background-color: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
}

.header h1 {
  margin: 0;
  font-size: 20px;
  color: #1a2b4b;
}

.back-btn {
  padding: 8px 20px;
  background-color: #f0f2f5;
  color: #1a2b4b;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.back-btn:hover {
  background-color: #e2e8f0;
}

.search-bar {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}

.search-input {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
}

.search-btn, .reset-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-btn {
  background-color: #1a3a6c;
  color: white;
}

.search-btn:hover {
  background-color: #0d2a56;
}

.reset-btn {
  background-color: #f0f2f5;
  color: #1a2b4b;
}

.reset-btn:hover {
  background-color: #e2e8f0;
}

.table-container {
  overflow-x: auto;
  margin-bottom: 20px;
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.detail-table th,
.detail-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e8e8e8;
}

.detail-table th {
  background-color: #f8fafc;
  font-weight: 600;
  color: #1a2b4b;
}

.detail-table tr:hover {
  background-color: #f8fafc;
}

.amount {
  font-weight: 600;
  color: #1a3a6c;
}

.summary {
  display: flex;
  justify-content: flex-end;
  gap: 30px;
  margin: 20px 0;
  padding: 15px;
  background-color: #f8fafc;
  border-radius: 6px;
}

.summary-item {
  font-size: 16px;
}

.summary-item strong {
  margin-left: 8px;
}

.total-amount {
  color: #f5222d;
  font-size: 18px;
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 20px;
}

.export-btn, .print-btn {
  padding: 10px 25px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.export-btn {
  background-color: #52c41a;
  color: white;
}

.export-btn:hover {
  background-color: #389e0d;
}

.print-btn {
  background-color: #1a3a6c;
  color: white;
}

.print-btn:hover {
  background-color: #0d2a56;
}

@media print {
  .header, .search-bar, .actions {
    display: none;
  }

  .exam-payment-detail {
    box-shadow: none;
    padding: 0;
  }

  .detail-table {
    font-size: 12px;
  }

  .summary {
    margin-top: 30px;
  }
}
</style>